<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找兄弟节点</title>
</head>
<body>
<h3>查找兄弟节点</h3>
<p>
    1. 下一个兄弟节点
    nextElementSibling 属性
    2. 上一个兄弟节点
    previousElementSibling 属性
</p>
<hr>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
    // 获取DOM元素
    const 第2个_li = document.querySelector('ul li:nth-child(2)') // 获取的是第2个li

    // 控制台输出看信息
    console.log(第2个_li.previousElementSibling) // 上一个兄弟节点 (标签)
    console.log(第2个_li.nextElementSibling) // 下一个兄弟节点
    console.log(第2个_li.nextElementSibling.nextElementSibling) // 下下一个兄弟节点

    // console.dir(li2.previousElementSibling) // 上一个兄弟
    // console.dir(li2.nextElementSibling) // 下一个兄弟
</script>
</body>
</html>